<template>
  <div class="card" id="bill-detail-flight">
    <div class="card-header">机票明细</div>
    <div class="card-body px-0">
      <ul class="nav nav-tabs nav-bordered mb-3" role="tablist">
        <li class="nav-item" v-for="(info, index) in detailInfo.tickets">
          <a
            class="nav-link"
            :class="{ active: index === 0 }"
            data-bs-toggle="tab"
            :href="`#billDetailTab` + index"
            role="tab"
            >{{ info.passengerName }}</a
          >
        </li>
      </ul>
      <div class="tab-content">
        <div
          class="tab-pane fade show"
          :class="{ active: index === 0 }"
          :id="`billDetailTab` + index"
          role="tabpanel"
          v-for="(info, index) in detailInfo.tickets"
        >
          <dl class="row">
            <dt class="col-4 text-end">票号</dt>
            <dd class="col-8">{{ info.balanceCode }}-{{ info.ticketNo }}</dd>
            <dt class="col-4 text-end">出票日期</dt>
            <dd class="col-8">{{ info.etdzDate }}</dd>
            <dt class="col-4 text-end">票面价</dt>
            <dd class="col-8">{{ info.price }}</dd>
            <dt class="col-4 text-end">销售价</dt>
            <dd class="col-8">{{ info.parvalue }}</dd>
            <dt class="col-4 text-end">税</dt>
            <dd class="col-8">{{ info.tax }}</dd>
            <dt class="col-4 text-end">保险</dt>
            <dd class="col-8">{{ info.insurance }}</dd>
            <dt class="col-4 text-end">代理费</dt>
            <dd class="col-8">{{ info.commission }}</dd>
            <dt class="col-4 text-end">服务费</dt>
            <dd class="col-8">{{ info.serviceCharge }}</dd>
            <dt class="col-4 text-end">优惠</dt>
            <dd class="col-8">{{ info.discount }}</dd>
            <dt class="col-4 text-end">总计</dt>
            <dd class="col-8">{{ info.accountRecv }}</dd>
            <dt class="col-4 text-end">成本</dt>
            <dd class="col-8">{{ info.cost }}</dd>
            <dt class="col-4 text-end">利润</dt>
            <dd class="col-8">{{ info.profit }}</dd>
          </dl>
          <table class="table table-sm">
            <thead>
              <tr class="bg-info">
                <th>出发</th>
                <th>到达</th>
                <th>日期</th>
                <th>航班号</th>
                <th>舱位</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <template v-for="flt in info.details">
                    <span :key="flt.id"
                      >{{ flt.dport }}{{ flt.dportName }} {{ flt.dterm }}<br
                    /></span>
                  </template>
                </td>
                <td>
                  <template v-for="flt in info.details">
                    <span :key="flt.id"
                      >{{ flt.aport }}{{ flt.aportName }} {{ flt.aterm }}<br
                    /></span>
                  </template>
                </td>
                <td>
                  <template v-for="flt in info.details">
                    <span :key="flt.id" class="d-none d-md-inline"
                      >{{ flt.ddate }}<br
                    /></span>
                    <span :key="flt.id" class="d-inline d-md-none"
                      >{{ flt.ddate.substring(5) }}<br
                    /></span>
                  </template>
                </td>
                <td>
                  <template v-for="flt in info.details">
                    <span :key="flt.id">{{ flt.flight }}<br /></span>
                  </template>
                </td>
                <td>
                  <template v-for="flt in info.details">
                    <span :key="flt.id">{{ flt.subclass }}<br /></span>
                  </template>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    detailInfo: {
      type: Object,
    },
  },
};
</script>